import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'date-change',
    templateUrl: './date-change.html',
    styleUrls: ['date-change.scss']
})
export class DateChangeComponent implements OnInit {
    // @Input() selectCallback: EventEmitter<any> = new EventEmitter();
    str;
    click = 0; // 原含义：周切换减少按钮点击次数
    click1 = 0; // 原含义：周切换增加按钮点击次数
    click2 = 0; // 原含义：月切换减少按钮点击次数
    click3 = 0; // 原含义：月切换增加按钮点击次数
    click4 = 0; // 原含义：年切换减少按钮点击次数
    click5 = 0; // 原含义：年切换增加按钮点击次数
    // 年左切换时的结束时间
    reyear1;
    // 年切换的开始时间
    reyear2 = this.setYear();
    // 当前时间，在周切换时不变
    nowDate = new Date();
    // 当前时间，在月切换时不变
    dat = new Date();
    // 当前时间，在年切换时不变
    time = this.setYear();
    time1 = this.setYear();
    // 默认显示的年,月,日的内容
    index = 0;
    // 控制年,月,日各个左右按钮
    clicknum = [0, 0, 0];
    year1;
    year2;
    data = [{
        id: 1,
        title: '周',
        ul: 'main',
        content: '近7天'
    }, {
        id: 2,
        title: '月',
        ul: 'main1',
        content: '近30天'
    }, {
        id: 3,
        title: '年',
        ul: 'main2',
        content: '近12个月'
    }];

    constructor(public modalCtrl: ModalController, private datePipe: DatePipe) {
    }

    ngOnInit() {
    }

    // 控制年,月,日对应显示
    openCharts(i) {
        this.clicknum[i] = 0;
        this.index = i;
        if (i === 0) {
            this.click = this.click2 = 0;
            this.data[i].content = '近7天';
        } else if (i === 1) {
            this.click1 = this.click3 = 0;
            this.data[i].content = '近30天';
        } else if (i === 2) {
            this.time = this.setYear();
            this.click4 = this.click5 = 0;
            this.data[i].content = '近12个月';
        }
    }


    setYear() {
        let settime;
        let nowtime = this.crtTimeDate(new Date());
        let len = 0;
        for (let i = 0; i < 12; i++) {
            len++;
            if (len < 12) {
                nowtime = this.reduceYear(nowtime);
                settime = this.reduceYear(nowtime);
            }
        }
        return settime;
    }


    // 向左切换减少年月日
    lastChange(v) {
        if (v === 0) {
            this.clicknum[0]++;
            this.reduceWeek(v);
        }
        if (v === 1) {
            this.clicknum[1]++;
            this.reduceMonth(v);
        }
        if (v === 2) {
            this.clicknum[2]++;
            this.reduceYear(this.time);
            this.year1 = this.time;
            let len2 = 0;
            for (let i = 0; i < 13; i++) {
                len2++;
                if (len2 < 13) {
                    this.time = this.reduceYear(this.time);
                }
            }
            this.year2 = this.time;
            this.str = this.crtTimeMonth(this.year2);
            this.str += ' 至 ';
            this.str += this.crtTimeMonth(this.year1);
            this.data[v].content = this.str;
        }
    }

    // 向右切换增加年月日
    nextChange(v) {
        if (v === 0) {
            this.clicknum[0]--;
            this.addWeek(v);
            if (this.click2 === this.click) {
                this.data[v].content = '近7天';
            }
        }
        if (v === 1) {
            this.clicknum[1]--;
            this.addMonth(v);
            if (this.click3 === this.click1) {
                this.data[v].content = '近30天';
            }
        }

        if (v === 2) {
            this.time = this.year1;
            this.clicknum[2]--;
            this.addYear(this.year1);
            this.reyear1 = this.year1;
            let len1 = 0;
            for (let i = 0; i < 13; i++) {
                len1++;
                if (len1 < 13) {
                    this.year1 = this.addYear(this.year1);
                }
            }
            this.reyear2 = this.year1;
            this.str = this.crtTimeMonth(this.reyear1);
            this.str += ' 至 ';
            this.str += this.crtTimeMonth(this.reyear2);
            this.data[v].content = this.str;
            if (this.click5 === this.click4) {
                this.data[v].content = '近12个月';
                this.time = this.time1;
            }
        }
    }

    // 一周切换
    // 减少一周操作
    reduceWeek(v) {
        let date1, date2;
        this.click++;
        this.click2--;
        // 计算需要显示的结束和开始时间
        date1 = new Date(this.nowDate);
        date2 = new Date(this.nowDate);
        date1.setDate(this.nowDate.getDate() - 7 * this.click);
        date2.setDate(this.nowDate.getDate() - (7 * this.click) - 6);
        this.str = this.crtTimeDate(date2);
        this.str += ' 至 ';
        this.str += this.crtTimeDate(date1);
        this.data[v].content = this.str;
    }

    // 增加七天操作
    addWeek(v) {
        let date3, date4;
        this.click2++;
        this.click--;
        const dates = this.nowDate;
        date3 = new Date(dates);
        date4 = new Date(dates);
        date3.setDate(dates.getDate() + 7 * this.click2);
        date4.setDate(dates.getDate() + (7 * this.click2) - 6);
        this.str = this.crtTimeDate(date4);
        this.str += ' 至 ';
        this.str += this.crtTimeDate(date3);
        this.data[v].content = this.str;
    }

    // 减少一月操作
    reduceMonth(v) {
        let dat3, dat4;
        this.click1++;
        this.click3--;
        dat3 = new Date(this.dat);
        dat4 = new Date(this.dat);
        dat3.setDate(this.dat.getDate() - 30 * this.click1);
        dat4.setDate(this.dat.getDate() - (30 * this.click1) - 29);
        this.str = this.crtTimeDate(dat4);
        this.str += ' 至 ';
        this.str += this.crtTimeDate(dat3);
        this.data[v].content = this.str;
    }

    // 增加一月操作
    addMonth(v) {
        let dat1, dat2;
        this.click3++;
        this.click1--;
        dat1 = new Date(this.dat);
        dat2 = new Date(this.dat);
        dat1.setDate(this.dat.getDate() + 30 * this.click3);
        dat2.setDate(this.dat.getDate() + (30 * this.click3) - 29);
        this.str = this.crtTimeDate(dat2);
        this.str += ' 至 ';
        this.str += this.crtTimeDate(dat1);
        this.data[v].content = this.str;
    }

    // 年切换
    // 减少一年操作(月份操作)
    reduceYear(time) {
        this.click4++;
        const arr = time.split('-');
        const year = arr[0]; // 获取当前日期的年份
        const month = arr[1]; // 获取当前日期的月份
        const day = arr[2]; // 获取当前日期的日
        let year2 = year;
        let month2: any;
        month2 = parseInt(month, 10) - 1;
        if (month2 === 0) {
            year2 = parseInt(year2, 10) - 1;
            month2 = 12;
        }
        let day2 = day;
        const days3 = new Date(year2, month2, 0);
        const days2 = days3.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }
        const t2 = year2 + '-' + month2 + '-' + days2;
        return t2;
    }

    // 增加一年操作(月份操作)
    addYear(year1) {
        this.click5++;
        const arr = year1.split('-');
        const year = arr[0]; // 获取当前日期的年份
        const month = arr[1]; // 获取当前日期的月份
        const day = arr[2]; // 获取当前日期的日
        let year3 = year;
        let month3: any;
        month3 = parseInt(month, 10) + 1;
        if (month3 === 13) {
            year3 = parseInt(year3, 10) + 1;
            month3 = 1;
        }
        let day3 = day;
        const days3 = new Date(year3, month3, 0);
        const days2 = days3.getDate();
        if (day3 > days2) {
            day3 = days2;
        }
        if (month3 < 10) {
            month3 = '0' + month3;
        }
        const t2 = year3 + '-' + month3 + '-' + day3;
        return t2;
    }

    // 格式化时间
    // 时间格式：年-月-日
    crtTimeDate(val) {
        if (val != null) {
            const date = new Date(val);
            return this.datePipe.transform(date, 'yyyy-MM-dd');
        }
    }

    // 时间格式：年-月
    crtTimeMonth(val) {
        if (val != null) {
            const date = new Date(val);
            return date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
        }
    }
}
